<template>
  <div class="XylRire font_s26 flex JustifyContentSA">
    <div class="flexC flex3 JustifyContentSB">
      <div class="flexC JustifyContentC AlignItemsC ">
        <p style="color: #7CD4FE; line-height:4.875rem;">采信</p>
        <img src="@/assets/img/components/18.png" width="70%" />
      </div>
      <div class="collInfo font_s28 flexC">
        <div class="flex">
          <p :class="{ infoDefaulf: true, infoChoose: isChoose }" @click="isChoose = !isChoose">正面记分清单</p>
          <p>&nbsp;&nbsp;</p>
          <p :class="{ infoDefaulf: true, infoChoose: !isChoose }" @click="isChoose = !isChoose">负面记分清单</p>
        </div>
        <!-- 正面记分清单 -->
        <div class="collContent flexC font_s26 JustifyContentSA AlignItemsC" v-if="isChoose">
          <div class="flex JustifyContentSB AlignItemsC collItem">
            <p class="olList">关于服务计划表、服务确认单、访护记录不规范问题</p>
            <p class="cursor olImg"><img @click="zhengmian01 = true" src="@/assets/img/home/xinyong01.png" alt="" /></p>
          </div>
          <div class="flex JustifyContentSB AlignItemsC collItem">
            <p class="olList">关于服务计划表、服务确认单不是服务对象或者家属签字，不是每天签字的问题</p>
            <p class="cursor olImg"><img @click="zhengmian02 = true" src="@/assets/img/home/xinyong01.png" alt="" /></p>
          </div>
          <div class="flex JustifyContentSB AlignItemsC collItem">
            <p class="olList">关于服务计划与实际服务项目不一致、实际服务项目与服务确认单不一致的问题</p>
            <p class="cursor olImg"><img @click="zhengmian03 = true" src="@/assets/img/home/xinyong01.png" alt="" /></p>
          </div>
          <div class="flex JustifyContentSB AlignItemsC collItem">
            <p class="olList">关于服务人员代服务对象申请长护险问题</p>
            <p class="cursor olImg"><img @click="zhengmian04 = true" src="@/assets/img/home/xinyong01.png" alt="" /></p>
          </div>
          <div class="flex JustifyContentSB AlignItemsC collItem">
            <p class="olList">关于基础资料管理不完善的问题</p>
            <p class="cursor olImg"><img @click="zhengmian05 = true" src="@/assets/img/home/xinyong01.png" alt="" /></p>
          </div>
          <div class="flex JustifyContentSB AlignItemsC collItem" style="border: none;">
            <p class="olList">关于进行家政服务问题</p>
            <p class="cursor olImg"><img @click="zhengmian06 = true" src="@/assets/img/home/xinyong01.png" alt="" /></p>
          </div>
        </div>
        <!-- 负面计分清单 -->
        <div class="collContent flexC font_s26 JustifyContentSA AlignItemsC" v-if="!isChoose">
          <div class="flex JustifyContentSB AlignItemsC collItem">
            <p class="olList">关于护理费倒挂问题</p>
            <p class="cursor olImg"><img @click="fumian01 = true" src="@/assets/img/home/xinyong01.png" alt="" /></p>
          </div>
          <div class="flex JustifyContentSB AlignItemsC collItem">
            <p class="olList">关于护理服务费用先收后退的问题</p>
            <p class="cursor olImg"><img @click="fumian02 = true" src="@/assets/img/home/xinyong01.png" alt="" /></p>
          </div>
          <div class="flex JustifyContentSB AlignItemsC collItem">
            <p class="olList">关于未取得ID代码服务人员开展服务问题</p>
            <p class="cursor olImg"><img @click="fumian03 = true" src="@/assets/img/home/xinyong01.png" alt="" /></p>
          </div>
          <div class="flex JustifyContentSB AlignItemsC collItem">
            <p class="olList">关于服务超时长、虚构服务问题</p>
            <p class="cursor olImg"><img @click="fumian04 = true" src="@/assets/img/home/xinyong01.png" alt="" /></p>
          </div>
          <div class="flex JustifyContentSB AlignItemsC collItem">
            <p class="olList">关于减免服务对象自付部分费用问题</p>
            <p class="cursor olImg"><img @click="fumian05 = true" src="@/assets/img/home/xinyong01.png" alt="" /></p>
          </div>
          <div class="flex JustifyContentSB AlignItemsC collItem">
            <p class="olList">关于机构以不正当手段拉老人现象的问题</p>
            <p class="cursor olImg"><img @click="fumian06 = true" src="@/assets/img/home/xinyong01.png" alt="" /></p>
          </div>
          <div class="flex JustifyContentSB AlignItemsC collItem" style="border: none;">
            <p class="olList">关于超等级结算、重复结算的问题</p>
            <p class="cursor olImg"><img @click="fumian07 = true" src="@/assets/img/home/xinyong01.png" alt="" /></p>
          </div>
        </div>
      </div>
    </div>
    <div class="flexC flex2 JustifyContentSB ">
      <div class="flexC JustifyContentC AlignItemsC">
        <p style="color: #7CD4FE; line-height:4.875rem;">评信</p>
        <img src="@/assets/img/components/18.png" width="100%" />
      </div>

      <ul class="flexC flex1 colorF AlignItemsC JustifyContentSA">
        <li class="square bgImg06 flex JustifyContentSA AlignItemsC">
          <p class="square_lv">A</p>
          <p class="font_s36">0～3分</p>
        </li>
        <li class="square bgImg05 flex JustifyContentSA AlignItemsC">
          <p class="square_huang">B</p>
          <p class="font_s36">4～10分</p>
        </li>
        <li class="square bgImg04 flex JustifyContentSA AlignItemsC">
          <p class="square_red">C</p>
          <p class="font_s36">10分以上</p>
        </li>
      </ul>
    </div>
    <div class="flexC flex3 ">
      <div class="flexC JustifyContentC AlignItemsC">
        <p style="color: #7CD4FE; line-height:4.875rem;">用信</p>
        <img src="@/assets/img/components/18.png" width="70%" />
      </div>
      <div class="flex flex2 JustifyContentC" style="margin-top: 0.825rem;">
        <div class="flexC JustifyContentSA AlignItemsC">
          <p style="color: #00FFFF; margin-bottom: 0.5rem;">· 信用推送 ·</p>
          <div style="position:relative">
            <img src="@/assets/img/components/46.png" alt="" />
            <div class="arrow01 animate01"><img src="@/assets/img/components/53.png" width="100%"></div>
            <div class="arrow02"><img src="@/assets/img/components/53.png" width="100%"></div>
            <div class="arrow03"><img src="@/assets/img/components/53.png" width="100%"></div>
            <div class="arrow04"><img src="@/assets/img/components/53.png" width="100%"></div>
          </div>
          <p style="color: #00FFFF; margin-bottom: 0.5rem;">· 信用修复 ·</p>
          <div class="flex colorF">
            <div class="flexC JustifyContentSA">
              <p class="nav_right_a flex JustifyContentC AlignItemsC">A</p>
              <p class="nav_right_a_p flex JustifyContentC AlignItemsC" style="writing-mode: vertical-lr;">无 需 修 复</p>
            </div>
            <div class="flexC JustifyContentSA" style="margin:0.2rem 0.4rem;">
              <p class="nav_right_b flex JustifyContentC AlignItemsC">B</p>
              <p style="margin:0.2rem;"></p>
              <p class="nav_right_b_p  flex JustifyContentC AlignItemsC"><span style="padding: 0 1rem;">如无其他不良记录，一年后恢复信用评级为A</span></p>
            </div>
            <div class="flexC JustifyContentSA">
              <p class="nav_right_c flex JustifyContentC AlignItemsC">C</p>
              <p class="nav_right_c_p flex JustifyContentC AlignItemsC"> <span style="padding: 0 1rem;">如无其他不良记录，一年之后恢复信用为B，再一年之后恢复为信用A</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 信用监管模型弹窗 -->
    <YiBaoRect01 v-if="zhengmian01" @hidden="hiddenRect01(zhengmian01)"><img src="@/assets/img/home/zheng01.png" width="100%" /></YiBaoRect01>
    <YiBaoRect01 v-if="zhengmian02" @hidden="hiddenRect01(zhengmian02)"><img src="@/assets/img/home/zheng02.png" width="100%" /></YiBaoRect01>
    <YiBaoRect01 v-if="zhengmian03" @hidden="hiddenRect01(zhengmian03)"><img src="@/assets/img/home/zheng03.png" width="100%" /></YiBaoRect01>
    <YiBaoRect01 v-if="zhengmian04" @hidden="hiddenRect01(zhengmian04)"><img src="@/assets/img/home/zheng04.png" width="100%" /></YiBaoRect01>
    <YiBaoRect01 v-if="zhengmian05" @hidden="hiddenRect01(zhengmian05)"><img src="@/assets/img/home/zheng05.png" width="100%" /></YiBaoRect01>
    <YiBaoRect01 v-if="zhengmian06" @hidden="hiddenRect01(zhengmian06)"><img src="@/assets/img/home/zheng06.png" width="100%" /></YiBaoRect01>
    <YiBaoRect01 v-if="fumian01" @hidden="hiddenRect01(fumian01)"><img src="@/assets/img/home/fu01.png" width="100%" /></YiBaoRect01>
    <YiBaoRect01 v-if="fumian02" @hidden="hiddenRect01(fumian02)"><img src="@/assets/img/home/fu02.png" width="100%" /></YiBaoRect01>
    <YiBaoRect01 v-if="fumian03" @hidden="hiddenRect01(fumian03)"><img src="@/assets/img/home/fu03.png" width="100%" /></YiBaoRect01>
    <YiBaoRect01 v-if="fumian04" @hidden="hiddenRect01(fumian04)"><img src="@/assets/img/home/fu04.png" width="100%" /></YiBaoRect01>
    <YiBaoRect01 v-if="fumian05" @hidden="hiddenRect01(fumian05)"><img src="@/assets/img/home/fu05.png" width="100%" /></YiBaoRect01>
    <YiBaoRect01 v-if="fumian06" @hidden="hiddenRect01(fumian06)"><img src="@/assets/img/home/fu06.png" width="100%" /></YiBaoRect01>
    <YiBaoRect01 v-if="fumian07" @hidden="hiddenRect01(fumian07)"><img src="@/assets/img/home/fu07.png" width="100%" /></YiBaoRect01>
  </div>
</template>

<script>
// 信用监管模型弹窗
import YiBaoRect01 from '@/components/YiBaoRect01'
export default {
  name: 'XylRire',
  components: {
    YiBaoRect01
  },
  data () {
    return {
      // 信用监管模型  正面记分清单
      zhengmian01: false,
      zhengmian02: false,
      zhengmian03: false,
      zhengmian04: false,
      zhengmian05: false,
      zhengmian06: false,
      // 信用监管模型  负面记分清单
      fumian01: false,
      fumian02: false,
      fumian03: false,
      fumian04: false,
      fumian05: false,
      fumian06: false,
      fumian07: false,
      // 计分清单状态改变
      isChoose: true,
      homeInfo: {}
    }
  },
  methods: {
    // 信用模型内弹窗关闭函数
    hiddenRect01 (choose) {
      // 正面计分清单
      if (choose === this.zhengmian01) {
        this.zhengmian01 = false
      }
      if (choose === this.zhengmian02) {
        this.zhengmian02 = false
      }
      if (choose === this.zhengmian03) {
        this.zhengmian03 = false
      }
      if (choose === this.zhengmian04) {
        this.zhengmian04 = false
      }
      if (choose === this.zhengmian05) {
        this.zhengmian05 = false
      }
      if (choose === this.zhengmian06) {
        this.zhengmian06 = false
      }
      // 负面计分清单
      if (choose === this.fumian01) {
        this.fumian01 = false
      }
      if (choose === this.fumian02) {
        this.fumian02 = false
      }
      if (choose === this.fumian03) {
        this.fumian03 = false
      }
      if (choose === this.fumian04) {
        this.fumian04 = false
      }
      if (choose === this.fumian05) {
        this.fumian05 = false
      }
      if (choose === this.fumian06) {
        this.fumian06 = false
      }
      if (choose === this.fumian07) {
        this.fumian07 = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.XylRire {
  width: 100%;
  height: 85%;
  font-weight: 400;
  .collInfo {
    width: 34%;
    height: 58%;
    position: absolute;
    top: 25%;
    font-weight: normal;
    left: 5%;
    .infoDefaulf {
      color: rgba($color: #a2abdf, $alpha: 0.8);
      cursor: pointer;
      padding: 0.625rem 1.25rem;
      background: url(../../../assets/img/home/xinyong04.png) no-repeat;
      background-size: 100% 100%;
    }
    .infoChoose {
      color: rgba($color: #00ffff, $alpha: 0.8);
      background: url(../../../assets/img/home/xinyong03.png) no-repeat;
      background-size: 100% 100%;
    }
    .collContent {
      color: rgba($color: #ffffff, $alpha: 0.9);
      background: url(../../../assets/img/home/xinyong02.png) no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 53vh;
      .collItem {
        width: 92%;
        border-bottom: 1px solid #1f6070;
        .olList {
          padding: 0.625rem 1.285rem 1rem 0;
          word-wrap: break-word;
          word-break: break-all;
          width: 90%;
        }
        .olImg {
          width: 10%;
          height: 3.5vh;
          img {
            width: 100%;
          }
        }
      }
    }
  }
  .square {
    width: 17.3125rem;
    height: 8.875rem;
    .square_lv {
      font-size: 3.375rem;
      color: #48c215;
    }
    .square_huang {
      font-size: 3.375rem;
      color: #e3c403;
    }
    .square_red {
      font-size: 3.375rem;
      color: #de1313;
    }
  }
  .bgImg04 {
    background: url(../../../assets/img/home/left04.png) no-repeat;
    background-size: 100% 100%;
  }
  .bgImg05 {
    background: url(../../../assets/img/home/left05.png) no-repeat;
    background-size: 100% 100%;
  }
  .bgImg06 {
    background: url(../../../assets/img/home/left06.png) no-repeat;
    background-size: 100% 100%;
  }
  .nav_right_a {
    width: 5.1875rem;
    height: 4.5rem;
    background: url(../../../assets/img/components/47.png) no-repeat center;
    background-size: 100% 100%;
  }
  .nav_right_a_p {
    width: 5.1875rem;
    height: 14rem;
    background: url(../../../assets/img/components/48.png) no-repeat center;
    background-size: 100% 100%;
  }
  .nav_right_b {
    width: 11rem;
    height: 4.5rem;
    background: url(../../../assets/img/components/49.png) no-repeat center;
    background-size: 100% 100%;
  }
  .nav_right_b_p {
    width: 10.9375rem;
    height: 14rem;
    background: url(../../../assets/img/components/50.png) no-repeat center;
    background-size: 100% 100%;
  }
  .nav_right_c {
    width: 14.6875rem;
    height: 4.5rem;
    background: url(../../../assets/img/components/51.png) no-repeat center;
    background-size: 100% 100%;
  }
  .nav_right_c_p {
    width: 14.6875rem;
    height: 14rem;
    background: url(../../../assets/img/components/52.png) no-repeat center;
    background-size: 100% 100%;
  }
  .arrow01 {
    width: 2.5rem;
    position: absolute;
    top: 22%;
    left: 25%;
    animation: animationArrow01 2.5s infinite;
  }
  .arrow02 {
    width: 2.5rem;
    position: absolute;
    top: 49%;
    left: 35%;
    animation: animationArrow02 2.5s infinite;
  }
  .arrow03 {
    width: 2.5rem;
    position: absolute;
    top: 49%;
    right: 34%;
    animation: animationArrow03 2.5s infinite;
  }
  .arrow04 {
    width: 2.5rem;
    position: absolute;
    top: 24%;
    right: 25%;
    animation: animationArrow04 2.5s infinite;
  }
  @keyframes animationArrow01 {
    0% {
      // width: 2.5rem;
      transform: scale(1) rotate(190deg);
    } 50% {
      // width: 3.5rem;
      transform: scale(1.4) rotate(190deg);
    } 100% {
      // width: 2.5rem;
      transform: scale(1) rotate(190deg);
    }
  }
  @keyframes animationArrow02 {
    0% {
      // width: 2.5rem;
      transform: scale(1) rotate(130deg);
    } 50% {
      // width: 3.5rem;
      transform: scale(1.4) rotate(130deg);
    } 100% {
      // width: 2.5rem;
      transform: scale(1) rotate(130deg);
    }
  }
  @keyframes animationArrow03 {
    0% {
      // width: 2.5rem;
      transform: scale(1) rotate(50deg);
    } 50% {
      // width: 3.5rem;
      transform: scale(1.4) rotate(50deg);
    } 100% {
      // width: 2.5rem;
      transform: scale(1) rotate(50deg);
    }
  }
  @keyframes animationArrow04 {
    0% {
      // width: 2.5rem;
      transform: scale(1) rotate(-10deg);
    } 50% {
      // width: 3.5rem;
      transform: scale(1.4) rotate(-10deg);
    } 100% {
      // width: 2.5rem;
      transform: scale(1) rotate(-10deg);
    }
  }
}
</style>
